<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvas {
            display: block;
            margin: 200px auto;
            border: 1px solid #000;
            box-shadow: 1px 1px #ccc;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="500" width="600" ></canvas>

    <script>
        let a = 5 + null; // 数字与null相加等于该数字
        console.log(a);
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        const img = new Image()
        img.src = "https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1590847767698-f511e86d-f183-4f75-a04d-1b99cd9f0bd7.jpeg"
        img.onload = function(){
            ctx.drawImage(img, 50, 50, 200, 200)

        }
    </script>
</body>

</html>